<script setup>
import { ref } from 'vue'
const statusObj = {
  approval: '待审批',
  approved: '已通过',
}
const props = defineProps({
  title: {
    type: String,
    default: '审批流程',
  },
  status: {
    type: String,
    default: '待审批',
  },
})
</script>

<template>
  <view class="approval-process">
    <view class="title">{{ props.title }}</view>
    <view class="steps">
      <view class="step-item" v-for="(item, index) in 3" :key="index">
        <image
          class="step-dot"
          src="../../static/images/common/step.png"
          mode="aspectFill"
        />
        <view class="step-content">
          <view class="step-top">
            <view class="flex-y-center">
              <view class="name">燕培浩</view>
              <view class="position">总经理</view>
            </view>
            <view class="date">2024-07-24 12:00</view>
          </view>
          <view class="step-bottom">
            <view class="opinion"> 意见：暂无 </view>
            <view
              :class="
                props.status == '待审批' ? 'status-approval' : 'status-approved'
              "
              >已通过</view
            >
          </view>
        </view>
        <view class="step-line"></view>
        <!-- 添加这一行 -->
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btns">
      <view class="reject">拒绝</view>
      <view class="pass">通过</view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.approval-process {
  padding: 28rpx 36rpx;
  border-radius: 16rpx;
  background: #ffffff;
  .title {
    margin-bottom: 20rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
  }
}

// 步骤条
.steps {
  .step-item {
    position: relative;
    display: flex;
    align-items: flex-start;
  }

  .step-dot {
    width: 24rpx;
    height: 24rpx;
    margin: 20rpx 20rpx 0 0;
    flex-shrink: 0; /* 防止圆点挤压内容 */
    align-self: flex-start; /* 将圆点对齐到左上角 */
  }

  .step-content {
    padding: 24rpx 28rpx;
    width: 100%;
    margin-bottom: 44rpx;
    border-radius: 10rpx;
    background: #ffffff;
    box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.1);
    .step-top,
    .step-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .step-top {
      margin-bottom: 12rpx;
    }
    .name {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      margin-right: 20rpx;
    }
    .position,
    .date {
      font-size: 28rpx;
      font-weight: 400;
      color: #666666;
    }
    .opinion {
      font-size: 24rpx;
      font-weight: 400;
      color: #666666;
    }
  }

  .step-item:last-child {
    .step-content {
      margin-bottom: 0;
    }
  }

  .step-line {
    position: absolute;
    top: 40rpx; /* 根据圆点的尺寸调整 */
    left: 12rpx; /* 将竖线居中对齐 */
    bottom: -40rpx; /* 调整竖线的长度 */
    width: 2rpx;
    background-color: #c4c4c4;
  }
  .step-item:last-child .step-line {
    display: none;
  }
}

// 按钮
.btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 96rpx;
  view {
    flex: 1;
    text-align: center;
  }
  .reject {
    margin-right: 32rpx;
    padding: 16rpx;
    border-radius: 10rpx;
    background: #ffffff;
    border: 1px solid #ea5506;
    color: #ea5506;
    font-size: 32rpx;
    font-weight: 700;
  }
  .pass {
    padding: 16rpx;
    border-radius: 10rpx;
    background: #ea5506;
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 700;
  }
}

.status-approval {
  font-size: 24rpx;
  font-weight: 400;
  color: #ea5506;
}

.status-approved {
  font-size: 24rpx;
  font-weight: 400;
  color: #38ba3a;
}

.flex-y-center {
  display: flex;
  align-items: center;
}
.limit2 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  white-space: nowrap;
}
.limit3 {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 3;
  white-space: nowrap;
}
</style>
